<template>
  <div id="saleSettleedDiv">
    <Splitpanes>
      <Pane size="15">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-form :data="searchForm" class="searchform form-input-m">
              <vxe-form-item>
                <vxe-input v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup="keyupEnter" @search-click="findSalesmanRow()"></vxe-input>
              </vxe-form-item>
            </vxe-form>
          </template>
        </vxe-toolbar>
        <div class="tableBox">
          <vxe-table ref="companyTableRef" :data="salesmanList" :loading="lloading" @current-change="salesmanRowClick" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" height="auto">
            <vxe-column field="name" title="销售人员"> </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="85">
        <SaleSettleList ref="saleSettleListRef" />
      </Pane>
    </Splitpanes>
    <!-- </div> -->
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { VXETable, VxeFormPropTypes, VxeFormInstance } from 'vxe-table';
import { IsEmpty, formatDateTime, autoIncrementNumber, sortByField } from '@/utils/common';
import SaleSettleList from './SaleSettleList.vue';

//暴露属性和方法
defineExpose({
  initPage
});
let searchForm = reactive({
  searchValue: ''
});
let store = AppStore();
let { proxy }: any = getCurrentInstance();

function initPage() {
  findSalesmanList();
}
let lloading = ref(false); //弹框表格数据加载状态
let salesmanList: any = reactive([]); //弹框表格数据
let sltSalesman: any = reactive({});
let saleSettleListRef = ref(null);

function findSalesmanList() {
  lloading.value = true;
  salesmanList.length = 0; //放入数据前清空数据
  const url = '/lab/inspectSalesman/getSalesmanList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        // seachValue: searchEqForm.searchValue
      }
    })
    .then((res: any) => {
      salesmanList.push(...res.data);
      if (salesmanList.length == 0) {
        sltSalesman = {};
        //settleDetailList.length = 0;
      } else {
        const kn = salesmanList.find((k: any) => k.id == sltSalesman.id);
        if (IsEmpty(kn)) {
          salesmanRowClick({ row: salesmanList[0] }); //默认选中第一条数据
        } else {
          salesmanRowClick({ row: kn }); //默认选中第一条数据
        }
      }
      lloading.value = false;
    })
    .catch((err: any) => {
      lloading.value = false;
      VxeMessage('获取获取弹框表格数据异常', VxeNotifyType.error);
    });
}
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findSalesmanRow();
  }
}

function findSalesmanRow() {
  const kn = salesmanList.find((k: any) => k.code.includes(searchForm.searchValue) || k.name.includes(searchForm.searchValue) || k.inputCode.includes(searchForm.searchValue));
  if (IsEmpty(kn)) {
    console.log('空');
  } else {
    salesmanRowClick({ row: kn }); //默认选中第一条数据
  }
}
function salesmanRowClick({ row }: any) {
  if (IsEmpty(row)) {
    sltSalesman = {};
    //settleDetailList.length = 0;
  } else {
    (proxy.$refs.companyTableRef as any)?.setCurrentRow(row);
    sltSalesman = row;

    saleSettleListRef.value.initPage(sltSalesman);
  }
}
</script>

<style lang="scss" scoped>
#saleSettleedDiv {
  height: 100%;
  //   .bodyContent {
  //     height: calc(100% - 60px);
  .splitpanes {
    background-color: $base-white;
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
    // table表格
    .tableBox {
      height: calc(100% - 36px);
    }
  }
  //}
}
</style>


